<script setup lang="ts">
import { ref } from 'vue'

import { useRoute } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { debugApp } from '@/services/app.ts'
//定义交互所需要的数据
const query = ref('')
const messages = ref<{ role: string; content: string }[]>([])
const isLoading = ref(false)
const route = useRoute()

const clearMessage = () => {
  messages.value = []
}

// type CompletionResponse =
//   | { data: { content: string } }
//   | { content: string }
//   | { code: string; data: string; msg: string }

const send = async () => {
  //1.获取用户输入的数据,判断数据是否存在
  if (!query.value) {
    Message.error('输入框的内容不能为空')
    return
  }
  //2.上一次请求没有结束时,不允许进行下一次请求
  if (isLoading.value) {
    Message.warning('上一次请求还未完成,请勿重复发送')
    return
  }

  //5.发起api请求

  try {
    //3.提取用户的输入信息,发送请求
    const humanQuery = query.value
    messages.value.push({
      role: 'human',
      content: humanQuery,
    })
    //4.清空输入框
    query.value = ''
    isLoading.value = true
    const response = await debugApp(route.params.app_id as string, humanQuery)
    console.log('==========================', response)
    const content = response.data
    // const response = await post<CompletionResponse>(
    //   '/apps/668f20cb-c95c-49c2-afed-6181b7b5198a/debug',
    //   {
    //     body: { query: humanQuery },
    //   },
    // )
    // 兼容 { data: { content } } | { content } | { code, data: string, msg }
    // let content = ''
    // // 1) { data: { content } }
    // if (
    //   (response as { data?: { content?: unknown } }).data &&
    //   typeof (response as { data: { content?: unknown } }).data.content === 'string'
    // ) {
    //   content = (response as { data: { content: string } }).data.content
    // }
    // // 2) { content }
    // if (!content && typeof (response as { content?: unknown }).content === 'string') {
    //   content = (response as { content: string }).content
    // }
    // // 3) { code, data: string, msg }
    // if (!content && typeof (response as { data?: unknown }).data === 'string') {
    //   content = (response as { data: string }).data
    // }
    messages.value.push({
      role: 'AI',
      content,
    })
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <!--  最外层容器-->
  <div class="min-h-screen">
    <!--    顶部导航-->
    <header class="flex items-center h-[74px] bg-gray-100 border-b border-gray-200 px-4">
      顶部导航
    </header>
    <!--    底部内容区-->
    <div class="flex flex-row h-[calc(100vh-74px)]]">
      <!--      左侧的编排-->
      <div class="w-2/3 bg-gray-50 h-full">
        <header class="flex items-center h-16 border-b border-gray-200 px-7 text-xl text-gray-700">
          应用编排
        </header>
        <div class="flex flex-row h-full">
          <div class="flex-1 border-r border-gray-200 p-6">人设与回复逻辑</div>
          <div class="flex-1 p-6">应用能力</div>
        </div>
      </div>
      <!--      右侧的调试与预览-->
      <div class="flex flex-col w-1/3 bg-white h-full">
        <header
          class="flex items-center h-16 px-7 text-xl bg-white border-b border-gray-200 text-gray-700 shadow-sm"
        >
          调试与预览
        </header>
        <!--        调试对话界面-->
        <div class="h-full min-h-0 px-6 py-7 overflow-x-hidden overflow-y-scroll scrollbar-w-none">
          <!--          人类消息-->
          <div class="flex flex-row gap-2 mb-6" v-for="(msg, index) in messages" :key="index">
            <!--            头像-->
            <a-avatar
              v-if="msg.role === 'human'"
              class="flex-shrink-0"
              :size="30"
              :style="{ backgroundColor: '#14a9f8' }"
              >刘
            </a-avatar>
            <a-avatar
              v-else
              class="flex-shrink-0"
              :size="30"
              :style="{ backgroundColor: '#00d0b6' }"
            >
              <icon-apps />
            </a-avatar>
            <!--            实际消息-->
            <div class="flex flex-col gap-2">
              <!--              名字-->
              <div class="font-semibold text-gray-700">
                {{ msg.role === 'human' ? '刘' : 'AI' }}
              </div>
              <div
                v-if="msg.role === 'human'"
                class="max-w-max bg-blue-700 text-white border border-blue-800 px-4 py-3 rounded-2xl leading-5"
              >
                {{ msg.content }}
              </div>
              <div
                v-else
                class="max-w-max bg-gray-100 text-gray-900 border border-gray-200 px-4 py-3 rounded-2xl leading-5"
              >
                {{ msg.content }}
              </div>
            </div>
          </div>
          <!--          没有任何数据时显示内容-->
          <div
            v-if="!messages.length"
            class="mt-[200px] flex flex-col items-center justify-center gap-2"
          >
            <a-avatar shape="square" :size="70" :style="{ backgroundColor: '#14a9f8' }">
              <icon-apps />
            </a-avatar>
            <div class="text-2xl font-semibold text-gray-900">AI聊天机器人</div>
          </div>
          <!--          ai加载状态-->
          <div v-if="isLoading" class="flex flex-row gap-2 mb-6">
            <!--            头像-->
            <a-avatar class="flex-shrink-0" :size="30" :style="{ backgroundColor: '#00d0b6' }">
              <icon-apps />
            </a-avatar>
            <!--            实际消息-->
            <div class="flex flex-col gap-2">
              <!--              名字-->
              <div class="font-semibold text-gray-700">大AI</div>
              <div
                class="max-w-max bg-gray-100 text-gray-900 border border-gray-200 px-4 py-3 rounded-2xl leading-5"
              >
                <icon-loading />
              </div>
            </div>
          </div>
        </div>
        <!--        调试对话输入框-->
        <div class="w-full flex-shrink-0 flex flex-col">
          <!--          顶部输入框-->
          <div class="px-6 flex items-center gap-4">
            <!--            清除按钮-->
            <a-button class="flex-shrink-0" type="text" shape="circle" @click="clearMessage">
              <template #icon>
                <icon-empty size="16" :style="{ color: '#374151' }" />
              </template>
            </a-button>
            <!--            输入框组件-->
            <div
              class="h-[50px] flex items-center gap-2 px-4 flex-1 border border-gray-200 rounded-full"
            >
              <!--              输入文本框-->
              <input type="text" class="flex-1 outline-0" v-model="query" />
              <!--              添加文件按钮-->
              <a-button type="text" shape="circle">
                <template #icon>
                  <icon-play-circle size="16" :style="{ color: '#374151' }" />
                </template>
              </a-button>
              <!--              发送按钮-->
              <a-button type="text" shape="circle" @click="send">
                <template #icon>
                  <icon-send size="16" :style="{ color: '#1d4ed8' }" />
                </template>
              </a-button>
            </div>
          </div>
          <!--          底部提示文字-->
          <div class="text-center text-gray-500 text-xs py-4">内容由AI生成,仅供参考</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped></style>
